<script lang="ts" setup>
import { getDepAllAPI } from '@/api/Department';
import type { DepartData } from '@/types/Department';
import { computed, ref } from 'vue';


const depList = ref<DepartData[]>([])
// 获取科室列表
const getDepAll = async () => {
  const res = await getDepAllAPI()
  // console.log(res);
  depList.value = res.data
}
getDepAll()

// 当前选中的科室
const activeIndex = ref(0)
// const activeDepChild = computed(() => {
//   return depList.value[activeIndex.value].child
// })

// 参数传递
const Props = defineProps<{
  type: string,
  illnessType:string
}>()
// console.log(Props);

</script>

<template>
  <view class="department-page">
    <scroll-view scroll-y class="department-primary">
      <view v-for="(item, index) in depList" :key="item.id" class="department-item"
        :class="{ active: activeIndex === index }"
        @click="activeIndex = index">
        {{ item.name }}
      </view>
    </scroll-view>
    <scroll-view class="department-secondary">
      <navigator
        hover-class="none"
        :url="`/subpkg_consult/pages/description/description?depId=${item.id}&type=${Props.type}&illnessType=${Props.illnessType}`"
        class="department-item"
        v-for="(item,index) in depList[activeIndex]?.child"
        :key="item.id">
        {{ item.name }}
      </navigator>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>